import React, { Component } from 'react';

import { Flex } from 'antd-mobile';
import { NavBar, Icon, Tabs, List} from 'antd-mobile';

import 'antd-mobile/lib/flex/style/index';
import 'antd-mobile/lib/nav-bar/style/css';
import 'antd-mobile/lib/icon/style/css';
import 'antd-mobile/lib/tabs/style/css';
import 'antd-mobile/lib/list/style/css';

class Profit extends Component{
    render(){
        const ProfitTabs = [
            { title: '今日' },
            { title: '昨日' },
            { title: '本周' },
            { title: '本月' },
            { title: '上月' },
          ];
          const Item = List.Item;
          const Brief = Item.Brief;
        return(
            <div>
                <NavBar
                    mode='light'
                    icon={<Icon type="left" />}
                    style={{backgroundColor:'white'}}
                ></NavBar>

                <div style={{marginTop:'60px'}}>
                    <Item >
                        <Flex justify='end'>
                            <span style={{fontSize:'14px',color:'#00bc12'}}>选择自定义时间段</span>
                        </Flex>
                    </Item>
                    <Tabs tabs={ProfitTabs} initialPage={0} animated={false} useOnPan={false} style={{marginTop:'50px'}}>
                        <div style={{ display: 'flex', backgroundColor: '#fff',width:'100%' }}>
                            <List style={{width:'100%'}}>
                            <Item multipleLine onClick={() => {}}>
                                    <Flex justify='between' style={{textAlign:'center'}}>
                                            <span>7月2日</span>
                                            
                                    </Flex>
                                </Item>
                                <Item multipleLine onClick={() => {}}>
                                    <Flex justify='between' style={{textAlign:'center'}}>
                                            <span>总收入<Brief style={{fontSize:'12px',color:'red'}}>0</Brief></span>
                                            <span>自身收入<Brief style={{fontSize:'12px',color:'red'}}>0</Brief></span>
                                            <span>代理收入<Brief style={{fontSize:'12px',color:'red'}}>0</Brief></span>
                                    </Flex>
                                </Item>
                                <Item multipleLine onClick={() => {}}>
                                    <Flex justify='between' style={{textAlign:'center'}}>
                                            <span>总订单<Brief style={{fontSize:'12px',color:'red'}}>0</Brief></span>
                                            <span>自身订单<Brief style={{fontSize:'12px',color:'red'}}>0</Brief></span>
                                            <span>代理订单<Brief style={{fontSize:'12px',color:'red'}}>0</Brief></span>
                                    </Flex>
                                </Item>
                            </List>
                        </div>
                        <div style={{ display: 'flex',  backgroundColor: '#fff' ,width:'100%'}}>
                            2
                        </div>
                        <div style={{ display: 'flex',  backgroundColor: '#fff',width:'100%' }}>
                            3
                        </div>
                        <div style={{ display: 'flex',  backgroundColor: '#fff',width:'100%' }}>
                            4
                        </div>
                        <div style={{ display: 'flex',  backgroundColor: '#fff' }}>
                            5
                        </div>
                    </Tabs>
                </div>
            </div>
        )
    }
}
export default Profit;